<template>
  <div>
    <!--条件查询-->
    <el-row>
      <el-col :span="24">
        <el-card header="歌单列表">

          <!--输入框-->
          <el-form :inline="true">
            <el-form-item label="歌单名称">
              <el-input
                  v-model="listTittle"
                  placeholder="名称"
                  clearable>
              </el-input>
            </el-form-item>

            <!--搜索-->
            <el-form-item>
              <el-button icon="el-icon-search" @click="getSongList">搜索</el-button>
            </el-form-item>
          </el-form>

        </el-card>
      </el-col>
    </el-row>


    <el-row>
      <el-col span="24">
        <el-card>
          <el-header style="background-color: #ffffff">
            <el-button icon="el-icon-circle-plus-outline" type="danger">歌单来自于用户添加,不需要自行添加</el-button>
          </el-header>
          <el-table
              :data="tableData"
              style="width: 100%">
            <el-table-column
                type="index"
                width="100"
                label="编号" sortable>
            </el-table-column>

            <el-table-column
                label="图片">
              <template v-slot="scope">
                <img :src="scope.row.listPhoto" alt="" width="90" height="90" style="border-radius: 10px"
                     @click="updatePhoto(scope.row)">
              </template>
            </el-table-column>

            <el-table-column
                prop=""
                label="详情信息">
              <template slot-scope="scope">
                <el-button size="mini" @click="toListInfo(scope.row)">详情</el-button>
              </template>
            </el-table-column>

            <el-table-column
                prop="listTittle"
                label="歌单名">
            </el-table-column>

            <el-table-column
                width="100"
                prop="listStyle"
                label="歌单类型">
            </el-table-column>


            <el-table-column label="操作" width="230">
              <template slot-scope="scope">
                <el-button
                    icon="el-icon-edit"
                    size="mini"
                    @click="handleEdit(scope.row)">编辑
                </el-button>
                <el-popconfirm
                    :title="('确认删除'+scope.row.listTittle+'吗?')"
                    @confirm="handleDelete(scope.row)"
                >
                  <el-button
                      style="margin-left: 20px"
                      icon="el-icon-delete"
                      size="mini"
                      type="danger" slot="reference">删除
                  </el-button>
                </el-popconfirm>

              </template>
            </el-table-column>

          </el-table>

        </el-card>
      </el-col>
    </el-row>

    <!--分页-->
    <div class="block">
      <span class="demonstration">显示总数</span>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="current"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="用户图片编辑" :visible.sync="dialog.dialogPhoto">
      <el-upload
          class="upload-demo"
          drag
          action="http://124.221.244.228:8089/upload"
          multiple
          :on-success="onSuccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-dialog>

    <!--编辑-->
    <el-dialog title="歌单信息编辑" :visible.sync="dialog.dialogUpdate">
      <el-form>
        <el-form-item label="歌单名" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="list.listTittle" clearable></el-input>
        </el-form-item>

        <el-form-item label="歌单简介" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="list.listIntroduce" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户类型" :label-width="formLabelWidth">
          <el-select v-model="list.listStyle" clearable placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="歌单歌曲" :label-width="formLabelWidth">
          <el-button type="primary" @click="getListInfo" size="mini">展示歌单歌曲</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.dialogUpdate = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdate">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="歌单歌曲" :visible.sync="dialog.dialogListInfo" width="700px">
      <el-button type="primary" @click="updateDialogInsertSong">添加歌曲</el-button>
      <el-table :data="listInfo">
        <el-table-column type="index"></el-table-column>
        <el-table-column property="songName" label="歌名" width="150"></el-table-column>
        <el-table-column property="songIntroduce" label="歌曲专辑" width="200"></el-table-column>
        <el-table-column property="singerName" label="作者"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                icon="el-icon-delete"
                size="mini"
                type="danger"
                @click="deleteListInfoSong(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="新增歌曲" :visible.sync="dialog.dialogInsertSong" width="800px">
      <el-card header="歌单列表">

        <!--输入框-->
        <el-form :inline="true">
          <el-form-item label="歌单名称">
            <el-input
                v-model="songName"
                placeholder="名称"
                clearable>
            </el-input>
          </el-form-item>

          <!--搜索-->
          <el-form-item>
            <el-button icon="el-icon-search" @click="getSongListToInsert">搜索</el-button>
          </el-form-item>
        </el-form>

        <el-table
            :data="listSongSearch"
            style="width: 100%">

          <el-table-column
              type="index"
              label="编号" sortable>
          </el-table-column>
          <el-table-column
              prop="songName"
              label="歌名" sortable>
          </el-table-column>
          <el-table-column
              prop="singerName"
              label="作者" sortable>
          </el-table-column>
          <el-table-column
              prop="songIntroduce"
              label="专辑名" sortable>
          </el-table-column>
          <el-table-column
              label="操作"
          >
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="getToInsert(scope.row)">添加</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-card>

    </el-dialog>

    <!--详情-->
    <el-dialog title="歌单详情" :visible.sync="dialog.dialogInfo" >
      <el-button type="primary" @click="getListInfo" size="mini" style="margin: 20px 20px">展示歌单歌曲</el-button>
      <el-descriptions class="margin-top" :column="4" direction="vertical" border>
        <el-descriptions-item label="歌曲专辑">
          <img :src="list.listPhoto" style="height: 70px;width: 70px;border-radius: 10px">
        </el-descriptions-item>
        <el-descriptions-item label="歌曲名">{{ list.listTittle }}</el-descriptions-item>
        <el-descriptions-item label="歌曲类型">{{ list.listStyle }}</el-descriptions-item>
        <el-descriptions-item label="介绍">{{ list.listIntroduce }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      listTittle: '', //标题
      current: 1, //当前页面
      size: 5, //每页显示
      tableData: [], //集合
      total: 0, //总数
      listId: 0, //每次id
      list: {}, //集合对象
      dialog: {
        dialogPhoto: false,
        dialogInfo: false,
        dialogUpdate: false,
        dialogInsert: false,
        dialogListInfo: false,
        dialogInsertSong: false,
        dialogSongInfo:false

      },
      formLabelWidth: "120px", //编辑页面距离
      options: ["民谣", "轻音乐", "流行", "说唱", "爵士", "摇滚"], //编辑页面
      listInfo: [], //歌单音乐
      listSongSearch: [], //搜索到的歌曲
      songName: '', //搜索歌曲的名字
    }
  },
  created() {
    this.getSongList()
  },
  methods: {
    getSongList() {
      this.$http.get("/list/songList", {
        params: {
          current: this.current,
          size: this.size,
          listTittle: this.listTittle,
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.data.records
        this.size = res.data.data.size
        this.current = res.data.data.current
        this.total = res.data.data.total
      })
    },
    handleSizeChange(res) {

    },
    handleCurrentChange(res) {
      this.current = res
      this.getSongList()
    },
    open2() {
      this.$message({
        message: '修改成功',
        type: 'success'
      });
    },
    open3() {
      this.$message({
        message: '修改失败',
        type: 'warning'
      });
    },
    handleDelete(row) {
      this.$http.get("/list/deleteListById", {
        params: {
          listId: row.listId
        }
      }).then(res => {
        setTimeout(() => {
          history.go(0)
        }, 1000)

        if (res.data.code === 200) {
          this.open2()
        } else {
          this.open3()
        }
      })
    },
    onSuccess(res) {
      this.listPhoto = res.data
      this.$http.get("/list/updatePhoto", {
        params: {
          listPhoto: this.listPhoto,
          listId: this.listId
        }
      }).then(res => {
        setTimeout(() => {
          history.go(0)
        }, 1000)

        if (res.data.code === 200) {
          this.open2()
        } else {
          this.open3()
        }
      })
    },
    updatePhoto(row) {
      this.listId = row.listId;
      this.dialog.dialogPhoto = true
    },
    handleEdit(row) {
      this.listId = row.listId
      this.dialog.dialogUpdate = true
      this.$http.get("/list/findByListId", {
        params: {
          listId: this.listId
        }
      }).then(res => {
        console.log(res)
        this.list = res.data.data
      })
    },
    getListInfo() {
      this.dialog.dialogListInfo = true
      this.$http.get("/list/findListInfo", {
        params: {
          listId: this.listId
        }
      }).then(res => {
        this.listInfo = res.data.data.songListVos
      })
    },
    deleteListInfoSong(row) {
      this.$http.get('/list/deleteListInfoSong', {
        params: {
          listId: this.listId,
          songId: row.songId
        }
      }).then(res => {
        setTimeout(() => {
          history.go(0)
        }, 1000)

        if (res.data.code === 200) {
          this.open2()
        } else {
          this.open3()
        }
      })
    },
    submitUpdate() {
      this.$http.post("/list/updateListInfo", {
        listId: this.listId,
        listTittle: this.list.listTittle,
        listIntroduce: this.list.listIntroduce,
        listStyle: this.list.listStyle
      }).then(res => {
        setTimeout(() => {
          history.go(0)
        }, 1000)

        if (res.data.code === 200) {
          this.open2()
        } else {
          this.open3()
        }
      })
    },
    updateDialogInsertSong() {
      this.dialog.dialogInsertSong = true
    },
    getSongListToInsert() {
      this.$http.get("/list/songListInsert", {
        params: {
          songName: this.songName
        }
      }).then(res => {
        console.log(res)
        this.listSongSearch = res.data.data
      })
    },
    getToInsert(row) {
      console.log(row.songId)
      this.$http.get("/list/songToInsertList", {
        params: {
          listId: this.listId,
          songId: row.songId
        }
      }).then(res => {
        setTimeout(() => {
          history.go(0)
        }, 1000)

        if (res.data.code === 200) {
          this.open2()
        } else {
          this.open3()
        }
      })
    },
    toListInfo(row){
      this.dialog.dialogInfo = true
      this.listId = row.listId
      this.$http.get("/list/findByListId", {
        params: {
          listId: this.listId
        }
      }).then(res => {
        console.log(res)
        this.list = res.data.data
      })
    }
  },


}
</script>

<style scoped>
.block {
  margin-top: 20px;
  text-align: center;
}
</style>